<style scoped>
	article{
		
	}
	.article-container{
		padding-bottom:80px;
	}
	.article-title{
		text-align:center;
	}
	.article-title > a{
		font-weight: lighter;
		font-size:1.625rem;
		line-height:2rem;
		color:#222;
		text-decoration: none;
		position:relative;
		display:inline-block;
	}
	.article-title > a::before{
		transition:left .2s,width .2s;
		bottom:-1px;
		left:50%;
		width:0;
		position:absolute;
		content:'';
		height: 2px;
		background-color:#555;
	}
	.article-title > a:hover:before{
		width:100%;
		left:0;
	}
	.article-info {
		text-align: center;
		margin-top:7px;
		font-size:12px;
		color:#999;
	}
	.article-info > span:nth-of-type(1){
		margin-right:5px;
	}
	.article-info > i:nth-of-type(2){
		margin-left:5px;
	}
	.article-body{
		margin-top:30px;
	}
	.article-link{
		font-weight: bolder;
		display:inline-block;
		border-bottom:2px solid #17b978;
		margin-top:50px;
		color:#17b978;
		text-decoration: none;
		font-size:14px;
		line-height:25px;
		transition: border-bottom-color .4s,color .4s;
	}
	.article-link:hover{
		color:#259f6c;
		border-bottom-color:#259f6c;
	}
	img{
		width:50%;
		height:auto;
		margin:0 auto !important;
	}

</style>


<template>
	<div id='home'>
		<div class='article-container' v-for='item in article' :key='item.id'>
			<article>
				<h1 class='article-title'><router-link v-text='item.title' :to="path+'/'+item._id"></router-link></h1>
				<div class='article-info'>
					<i class='iconfont'>&#xe660;</i>
					 发表于 
					<span v-text='item.publishTime'></span>
					  |  
					<i class='iconfont'>&#xe60b;</i>
					 阅读数 
					<span v-text='item.readingAmount'></span>
				</div>
				<div class='article-body markdown-body' v-html='item.html'></div>
			</article>
			<router-link class='article-link' :to="path+'/'+item._id">阅读全文 >></router-link>
		</div>
	</div>
</template>

<script>
export default {
        name: 'Home',
        data () {
            return {
				article:[],
				path:this.$route.path
            }
        },
        mounted() {
        	document.title="Joey Wong's Blog-Home";
			const that = this;
            this.$http.get(
            	that.surl+this.$route.path
            )
              .then(function (response) {
              	if(response.data!==false){
				  that.article = response.data;
              	}else{
              		that.$router.push('/404');
              	}
              })
              .catch(function (error) {
                that.$router.push('/404');
              });

        }
    }
</script>